<template>
  <el-form
    :model="form"
    :rules="rules"
    status-icon
    ref="form"
    class="login-container"
  >
    <h3 class="login_title">系统登录</h3>
    <el-form-item
      label="用户名"
      label-width="80px"
      class="username"
      prop="username"
    >
      <el-input
        type="input"
        v-model="form.username"
        autocompete="off"
        placeholder="请输入帐号"
      ></el-input>
    </el-form-item>
    <el-form-item
      label="密码"
      label-width="80px"
      class="password"
      prop="password"
    >
      <el-input
        type="password"
        v-model="form.password"
        placeholder="请输入密码"
        autocompete="off"
      ></el-input>
    </el-form-item>
    <el-form-item class="login_submit">
      <el-button
        type="primary"
        size="default"
        @click="login"
        class="login_submit"
        >登录</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script>
import Mock from 'mockjs'
import { getMenu } from '@/api/data'

export default {
  name: 'Login',
  data() {
    return {
      form: {},
      rules: {
        username: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur' /*trigger是校验方式 required是必填 */
          },
          {
            min: 3,
            message: '用户名长度不能小于3位',
            trigger: 'blur'
          }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    login() {
      //这里this.form储存的是用户名和密码 传入到调用接口里面
      
      getMenu(this.form).then(res => {
        // console.log(res)
        if (res.code === 20000) {
        /**  如果请求成功我们可以拿到permisson中menu的数据并存入到store中,在进行处理,使用router的动态添加路由的方式将menu的数据添加到路由中,
         就可以将router文件夹和commonaside的menu去掉*/
        // 清除当前路由
         this.$store.commit('clearMenu')
        //  设置
         this.$store.commit('setMenu',res.data.menu)
        //  设置token
         this.$store.commit('setToken',res.data.token)
        //  动态添加路由
         this.$store.commit('addMenu',this.$router)
        //  页面跳转
         this.$router.push({name:'home'})
        }else {
          this.$message.warning(res.data.message)
        }
      })
      // // 登陆的时候,我们需要把token设置进去
      // // 通过mock模拟生成我们这么一个token 
      // const token = Mock.random.guid()
      // // 并进行设置
      // this.$store.commit('setToken', token)
      // this.$router.push({ name: 'home' })
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {}
}
</script>
<style lang="less" scoped>
.login-container {
  border-radius: 18px;
  background-clip: padding-box;
  margin: 150px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background-color: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.login_submit {
  text-align: center;
  margin: 10px 0 10px 0;
}
</style>
